<template>
  <!-- 雷达图  图表必须给高和宽度-->
  <div ref="myDiv" class="radar-echart" />
</template>

<script>
// 完成加载过程
var echarts = require('echarts')

export default {
  // 页面渲染完毕事件
  created() {
    var today = new Date();

    for (var i = 0; i < 7; i++) {
      var pastDate = new Date(today);
      pastDate.setDate(today.getDate() - i);
      var dateString = pastDate.getFullYear() + '-' + (pastDate.getMonth() + 1).toString().padStart(2, '0') + '-' + pastDate.getDate().toString().padStart(2, '0');
      this.data.push(dateString);
    }
    for (var i = 0; i < 7; i++) {
      // 生成1到3升之间的随机数
      var dailyIntake = Math.floor(Math.random() * (3000 - 1000 + 1)) + 1000;
      // 将随机数转换为升
      this.waterIntake.push(dailyIntake / 1000);
    }
    // this.waterIntake
  },
  mounted() {
    const myChart = echarts.init(this.$refs.myDiv) // 得到图表实例
    myChart.setOption({

      // backgroundColor:"#0F285C",
      grid: {
        containLabel: true,
        top: 30,
        right: 15,
        bottom: 0,
        left: 15
      },
      tooltip: {
        trigger: "axis",
        axisPointer: {
          type: 'shadow'
        },
        formatter: params => {
          console.log(params)
          const {
            name,
            data,
          } = params[0];
          return `
            <span style="font-size: 14px;font-family: Source Han Sans CN-Medium;font-weight: 500;color: #FFFFFF;margin-bottom:12px;">${name}</span>
            <sapn style="font-size: 14px;font-family: Source Han Sans CN-Medium;font-weight: 500;color: #FFFFFF;margin-bottom:4px;">：${data} 升</span>
         `
        },
        extraCssText: 'opacity: 0.8;background-color:#050F1B;padding:16px;box-shadow: 1px 6px 15px 1px rgba(0,0,0,0.13);border-radius: 4px;filter: blur(undefinedpx);border:none;'
      },
      xAxis: {
        // 类目轴
        type: "category",
        data: this.data,
        axisTick: {
          show: false //隐藏X轴刻度
        },
        axisLine: {
          lineStyle: {
            color: "#CCCCCC"
          }
        },
        axisLabel: {
          show: true,
          textStyle: {
            color: '#000',
            fontSize: 14,
            fontFamily: 'Source Han Sans CN-Regular',
          }
        },
      },
      yAxis: {
        type: 'value',
        name: "",
        nameTextStyle: {
          color: 'rgba(0,0,0,0.65)',
          fontSize: 14,
          fontFamily: 'Source Han Sans CN-Regular',
          align: "left",
          verticalAlign: "center",
        },
        axisLabel: {
          color: 'rgba(0,0,0,0.65)',
          textStyle: {
            fontSize: 14
          },
        },
        axisLine: {
          show: false,
          lineStyle: {
            color: 'rgba(223, 223, 223, 1)',
          }
        },
        axisTick: {
          show: false
        },
        splitLine: {
          lineStyle: {
            color: 'rgba(223, 223, 223, 1)',
            type: "dashed",
          }
        }
      },
      series: [
        {
          type: "bar",
          barWidth: "50%",
          showBackground: true,
          backgroundStyle: {
            color: "transparent"
          },
          itemStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              { offset: 0, color: "#4B87FFFF" },
              { offset: 1, color: "#82BCFFFF" }
            ])
          },
          data: this.waterIntake
        }
      ]
    })
  },
  data() {
    return {
      data: [],
      waterIntake: []
    }
  },
  methods: {

  },
}
</script>

<style>
.radar-echart {
  width: 100%;
  height: 400px;
}
</style>
